<!--
 * @Author: lixingda 1789539054@qq.com
 * @Date: 2025-02-27 19:49:58
 * @LastEditors: lixingda 1789539054@qq.com
 * @LastEditTime: 2025-02-27 20:41:49
 * @FilePath: \vue-admin-template\src\views\allowInstition\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="allow-page">
    <div class="title">
      <div class="icon" />访问记录
    </div>
    <div class="tab-list">
      <div v-for="(item, index) in tabList" :key="index" :class="activeTab === index ? 'active' : 'not-active'" class="tab-item" click="activeTab = index">
        {{ item.name }}({{ item.quantity }})
      </div>
    </div>
    <div class="table">
      <el-table
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column
          prop="email"
          label="访问人邮箱"
        />
        <el-table-column
          prop="id"
          label="病例编号"
        />
        <el-table-column
          prop="title"
          label="病历名称"
        />
        <el-table-column label="属性集合">
          <template slot-scope="scope">
            <el-button
              type="text"
              style="color: #0099cc;"
              size="mini"
              @click="handleEdit(scope.$index, scope.row)"
            >属性验证</el-button>
          </template>
        </el-table-column>
        <el-table-column
          prop="startTime"
          label="开始时间"
        />
        <el-table-column
          prop="endTime"
          label="结束时间"
        />
        <el-table-column label="状态">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.state === 0"
              type="text"
              style="color: #0099cc;"
              size="mini"
              @click="handleEdit(scope.$index, scope.row)"
            >通过</el-button>
            <el-button v-else-if="scope.row.state === 1" style="color: yellowgreen" type="text" size="mini">待审核</el-button>
            <el-button v-else style="color: red" type="text" size="mini">待验证</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeTab: 0,
      tabList: [
        {
          quantity: 7,
          name: '全部'
        }
      ],
      tableData: [
        {
          time: '2024-01-27 19:49:58',
          id: 'EHR10001200112024542',
          title: '心内科诊断记录',
          email: '123123@qq.com',
          hopsital: '北京协和医院',
          keshi: '心血管',
          zhicheng: '教授',
          state: 1
        },
        {
          time: '2024-01-24 19:49:58',
          id: 'EHR10001200112024522',
          title: '门诊记录',
          email: 'as212@163.com',
          hopsital: '260医院',
          startTime: '2024-01-28 9:55:58',
          endTime: '2024-01-28 11:55:58',
          state: 0
        },
        {
          time: '2024-07-16 19:49:58',
          email: '12dasx@163.ccom',
          id: 'EHR10001200112024122',
          title: '外科诊断记录',
          hopsital: '河北胸科医院',
          state: 1
        },
        {
          time: '2024-11-27 12:49:58',
          email: '123123@qq.com',
          id: 'EHR10001200112024542',
          title: '呼吸科诊断记录',
          hopsital: '北京协和医院',
          keshi: '心血管',
          zhicheng: '教授',
          state: 2
        },
        {
          time: '2024-12-12 09:49:58',
          email: 'as212@163.com',
          id: 'EHR10001200112024542',
          title: '心内科诊断记录',
          hopsital: '260医院',
          startTime: '2024-12-13 8:55:58',
          endTime: '2024-12-13 13:55:58',
          state: 0
        }
      ]
    }
  },
  methods: {
    handleEdit(index, data) {
      console.log(index, data)
    }
  }
}
</script>
  <style scoped lang="scss">
      .allow-page{
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        padding: 20px;
        height: calc(100vh - 50px) !important;
        .title{
          display: flex;
          align-items: center;
          color: #666666;
          .icon{
              width: 3px;
              height: 18px;
              background-color: #0099cc;
              margin-right: 7px;
          }
        }
        .tab-list{
          display: flex;
          height: 60px;
          margin-top: 20px;
          margin-bottom: 20px;
          .tab-item{
              width: 150px;
              height: 60px;
              text-align: center;
              line-height: 60px;
              margin-right: 10px;
              padding-bottom: 4px;
          }
          .active{
              color: #0099cc;
              border-bottom: 2px solid #0099cc;
          }
          .not-active{
              color: #333333;
              border-bottom: 2px solid #ffffff;
          }
        }
      }
  </style>
